import React, {Component} from 'react';
import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";
import "./App.css";
class App extends Component {
    state = {
        todoList:[
            {
                // 唯一标识
                id:Math.random().toString(36).slice(2),
                // 标题
                title:"金庸",
                // 是否被选中
                isChecked:true
            },
            {
                // 唯一标识
                id:Math.random().toString(36).slice(2),
                // 标题
                title:"古龙",
                // 是否被选中
                isChecked:false
            }
        ]
    }
    // 添加数据
    addTodo(e){
        // 如果按下了回车键
        if(e.keyCode === 13){
            /*伪代码（思路）
            *   1- 接收写入的内容
            *   2- 验证内容是否为空
            *   3- 验证内容是否与列表中的标题是重复
            *   4- 将内容放置到数据状态todoList头部            *
            * */
            const title = e.target.value.trim();// 接收写入的内容
            if(title.length === 0){
                alert("请输入标题");
                return;
            }
            // find查找第一个满足条件的元素，并返回。如果没有满足条件的元素，返回的是undefined
            if(this.state.todoList.find(v=>v.title === title)){
                alert("请不要输入重复的内容");
                return;
            }
            // 放置到头部1
            // const todoList = JSON.parse(JSON.stringify(this.state.todoList));
            // todoList.unshift({
            //     id:Math.random().toString(36).slice(2),
            //     title,
            //     isChecked:false
            // })
            // this.setState({todoList});
            // e.target.value = null;

            // 放置到 头部2
            this.setState({
                todoList:[
                    {
                        id:Math.random().toString(36).slice(2),
                        title,
                        isChecked:false
                    },
                    ...this.state.todoList
                ]
            })



        }
    }
    // 根据ID修改是否选中的状态
    changeIsCheckedById(id){
        // 1- 复制
        // const copyTodoList = [...this.state.todoList];
        // const todoList = Array.from(this.state.todoList);
        // const info = todoList.find(v=>v.id===id);
        // info.isChecked = !info.isChecked;
        // this.setState({
        //     todoList
        // })

        // 2- MAP映射一个新的数组
        this.setState({
            todoList:this.state.todoList.map(item=>{
                if(item.id === id) item.isChecked = !item.isChecked;
                return item;
            })
        })

    }
    render() {
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <TodoHeader addTodo={this.addTodo.bind(this)}/>
                    <TodoMain
                        changeIsCheckedById={this.changeIsCheckedById.bind(this)}
                        todoList={this.state.todoList} />
                    <TodoFooter/>
                </div>
            </div>
        );
    }
}

export default App;